<template>
    <div>
       <p>更新时间：{{ updateTime }}</p>
       <p>{{ warning }}</p>
       <!-- <div ref="hid" class="one" v-for="(i, index) in warnings" :key="index"> -->
        <div ref="hid" class="one" >
            <div class="two">
                <p class="two-p-1">{{ warnings.sender }}</p>
                <p class="two-p-2">等级：{{ warnings.level }}</p>
                <p class="two-p-3">类型：{{ warnings.typeName }}</p>
            </div>
            <div class="three">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warnings.text }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import { key, api_Warning } from '../common/constrant.js'

    export default{
        data(){
            return{
                updateTime: "",
                warning: '',
                warnings: [],
            }
        },

        mounted(){
            this.getData()
        },

        computed:{
            location:function(){
                return this.$store.state.location
            }
        },

        methods:{
            // 获取数据
            getData(){
                var hid = this.$refs.hid
                this.loc = Number(this.location.lon).toFixed(2) + "," + Number(this.location.lat).toFixed(2)
                axios.get(api_Warning,{
                    params:{
                        key: key,
                        location: this.loc
                    }
                }).then((res) => {
                  console.log(res.data)
                  this.warnings = []
                  this.updateTime = res.data.updateTime
                  if(res.data.warning.length == 0){
                    this.warning = "当前城市无预警"
                    hid.style.display = 'none';
                  }
                  else
                  {
                    this.warnings = res.data.warning[0]
                    hid.style.display = 'block';
                  }
                })
                
            },
            
        },

        watch:{
            location:function(){
                this.getData()
            }
        }
    }
</script>

<style>
.container {
    padding: 20px;
    font-family: Arial, sans-serif;
}
 
.warning-container {
    margin-top: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}
 
.one {
    display: flex;
    flex-direction: column;
}
 
.two {
    margin-bottom: 10px;
}
 
.two-p-1, .two-p-2, .two-p-3 {
    margin: 0;
    padding: 5px 0;
    color: #333;
}
 
.three {
    padding-left: 20px;
    color: #666;
}
 
.three p {
    margin: 0;
}
</style>